import React, { Component } from 'react'

export default class App extends Component {
    state = {
        list: [{ id: 1, text: '111', isCheck: false }, { id: 2, text: '1212', isCheck: false }],
        mytext: ''
    }
    render() {
        return (
            <div>
                <input value={this.state.mytext} onChange={(e) => { this.setState({ mytext: e.target.value }) }} />
                <button onClick={this.handleClickadd}>添加</button>
                <ul>
                    {
                        this.state.list.map((item, index) => <li key={item.id}>
                            <input type="checkbox" checked={item.isCheck} onChange={()=>{this.handleClick(index)}}/>
                            {/* 富文本展示 */}
                            <span dangerouslySetInnerHTML={{
                                __html: item.text
                            }} style={{textDecoration: item.isCheck ? 'line-through':''}}></span>
                            <button onClick={() => {
                                this.handleClick(index)
                            }}>删除</button>
                        </li>)
                    }
                </ul>
                {this.state.list.length === 0 ? <div>删光了</div> : null}
                {this.state.list.length === 0 && <div>控制js显示</div>}

                <div className={this.state.list.length === 0 ? '' : 'show'}>css显示</div>
            </div>
        )
    }

    handleClickadd = () => {
        let newlist = [...this.state.list]
        newlist.push({ id: Math.random()*10000000, text: this.state.mytext, isCheck: false })
        this.setState({ list: newlist, mytext: '' })
    }

    handleClick(index) {
        console.log('index',index)
        let newlist = [...this.state.list]
        newlist[index].isCheck=!newlist[index].isCheck
        this.setState({ list:newlist})
    }
}
